<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-09 13:36:18
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-04-09 17:31:53
 * @FilePath: \ant-design-vue-jeecg-master\src\views\baseStationChannel\modules\infoModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-modal
    width="750px"
    title="交互事件详情"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-table
      ref="table"
      size="middle"
      :scroll="{ x: true }"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      class="j-table-force-nowrap"
    >
      <template slot="htmlSlot" slot-scope="text">
        <div v-html="text"></div>
      </template>
      <template slot="imgSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
        <img
          v-else
          :src="getImgView(text)"
          height="25px"
          alt=""
          style="max-width: 80px; font-size: 12px; font-style: italic"
        />
      </template>
      <template slot="fileSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
        <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
          下载
        </a-button>
      </template>

      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>

        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleInfo(record)">详情</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm overlayClassName="poperLayTable"  title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </a-table>
  </a-modal>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
const dataSource = [
  {
    key: '1',
    time: '2023-1-15',
    event: '事件1',
    remark: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    time: '2023-2-15',
    event: '事件2',
    remark: 'New York No. 2 Lake Park',
  },
  {
    key: '3',
    time: '2023-3-15',
    event: '事件3',
    remark: 'New York No. 3 Lake Park',
  },
]
export default {
  name: 'infoModal',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      dataSource,
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'time',
        },
        {
          title: '事件',
          align: 'center',
          dataIndex: 'event',
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   fixed: 'right',
        //   width: 147,
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    }
  },
  methods: {
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
  },
}
</script>

<style></style>
